<template>
    <el-drawer
        v-model="visible"
        :show-close="false"
        :size="550"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @open="handleOpenDrawer"
        @close="handleCloseDrawer"
    >
        <template #header>
            <span class="drawer-title" v-show="!flag">
                <span @click="edit"
                    ><el-icon class="edit-icon"><EditPen /></el-icon
                    >{{ approverConfig.nodeName }}</span
                >
            </span>
            <el-input
                ref="inputRef"
                v-model="approverConfig.nodeName"
                v-show="flag"
                style="width: 70%"
                @blur="flag = false"
            />
        </template>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="changeTab">
            <el-tab-pane label="人员配置" name="人员配置"></el-tab-pane>
            <el-tab-pane label="节点单据状态" name="节点单据状态"></el-tab-pane>
            <el-tab-pane label="驳回设置" name="驳回设置"></el-tab-pane>
        </el-tabs>

        <div class="tabs-content" v-show="activeName === '人员配置'">
            <div>
                <div>请选择人员/权限</div>
                <div class="scolle-box">
                    <el-row
                        v-for="item in people"
                        :key="item"
                        justify="space-between"
                        style="margin-bottom: 10px"
                    >
                        <el-checkbox-group v-model="peopleRes">
                            <el-checkbox
                                :label="item.id"
                                @change="(val) => changePeople(val, item)"
                                >{{ item.name }}</el-checkbox
                            >
                        </el-checkbox-group>
                        <el-select
                            v-if="approverConfig.people.map((x) => x.id).includes(item.id)"
                            v-model="item.auth"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            style="width: 240px"
                            @change="(val) => changeAuth(val, item)"
                        >
                            <el-option
                                v-for="x in auth"
                                :key="x.id"
                                :label="x.name"
                                :value="x.id"
                            />
                        </el-select>
                    </el-row>
                </div>
            </div>
        </div>
        <div v-show="activeName === '节点单据状态'">
            <div class="title-mb">请款单</div>
            <el-radio-group v-model="approverConfig.finance_node_status">
                <el-radio :label="item.value" v-for="item in node_status" :key="item.value">{{
                    item.name
                }}</el-radio>
            </el-radio-group>
            <div class="title-mb">付款单</div>
            <el-radio-group v-model="approverConfig.finance_node_payment_status">
                <el-radio :label="item.value" v-for="item in payment_status" :key="item.value">{{
                    item.name
                }}</el-radio>
            </el-radio-group>
        </div>

        <div v-show="activeName === '驳回设置'">
            <el-button type="primary" :icon="Plus" @click="addItem">添加节点</el-button>
            <div
                class="title-mb reject-item"
                v-for="(item, index) in approverConfig.reject"
                :key="index"
            >
                <div>
                    <span>驳回节点：</span>
                    <el-select v-model="item.nodeName" placeholder="请选择">
                        <el-option
                            v-for="item in opt"
                            :key="item.value"
                            :label="item.nodeName"
                            :value="item.nodeId"
                        ></el-option>
                    </el-select>
                </div>
                <div>
                    <el-button type="primary" @click="openDialog(item)">驳回条件</el-button>
                    <el-button type="warning" :icon="Minus" circle @click="deleteItem(index)" />
                </div>
            </div>
        </div>

        <template #footer>
            <el-button type="primary" @click="saveApprover">确 定</el-button>
            <el-button @click="closeDrawer">取 消</el-button>
        </template>
    </el-drawer>

    <fieldsDialog v-model:visible="tipVisible" :list="tipList" @setValue="setValue" />
</template>
<script setup>
import fieldsDialog from './../dialog/fieldsDialog.vue'
import { Minus, Plus } from '@element-plus/icons-vue'
import { ref, watch, computed } from 'vue'
import { useFlow } from '@/stores/modules/flow'
import { getPerson, dictDataLists } from '@/api/financial/lists'

const tipList = ref([])
const tipVisible = ref(false)

const activeName = ref('人员配置')
const people = ref([])
const peopleRes = ref([])
const auth = ref([])
const handleOpenDrawer = async () => {
    const peopleList = await getPerson({ page_type: 0 })
    const authList = await dictDataLists({ page_no: 1, page_size: 100, type_id: 42 })
    const res = authList.lists
        .filter((x) => x.status)
        .map((item) => {
            return {
                id: item.id,
                name: item.name,
                value: item.value
            }
        })
    peopleList.forEach((element) => {
        element.auth = []
    })
    people.value = peopleList
    auth.value = res
    approverConfig.value.people.forEach((item) => {
        const index = people.value.findIndex((x) => x.id === item.id)
        peopleRes.value.push(item.id)
        people.value[index].auth = [...item.auth.map((x) => x.id)]
    })
}
const handleCloseDrawer = () => {
    peopleRes.value = []
    activeName.value = '人员配置'
}
const changePeople = (val, item) => {
    const index = approverConfig.value.people.findIndex((x) => x.id === item.id)
    if (val) {
        index === -1 && approverConfig.value.people.push({ auth: [], ...item })
    } else {
        index !== -1 && approverConfig.value.people.splice(index, 1)
    }
}
const changeAuth = (val, item) => {
    const index = approverConfig.value.people.findIndex((x) => x.id === item.id)
    approverConfig.value.people[index].auth = []
    val.forEach((x) => {
        const obj = auth.value.find((v) => v.id === x)
        approverConfig.value.people[index].auth.push(obj)
    })
}
const changeTab = ({ props }) => {
    props.name === '人员配置' && handleOpenDrawer()
    props.name === '节点单据状态' && getState()
}
const payment_status = ref([])
const node_status = ref([])
const getState = async () => {
    // 付款单
    const payment = await dictDataLists({ page_no: 1, page_size: 100, type_id: 44 })
    // 请款单
    const node = await dictDataLists({ page_no: 1, page_size: 100, type_id: 43 })
    payment_status.value = payment.lists.filter((x) => x.status)
    node_status.value = node.lists.filter((x) => x.status)
}
const inputRef = ref(null)
const flag = ref(false)
const edit = () => {
    flag.value = true
    inputRef.value.focus()
}
const setValue = (value) => {
    tipList.value.dg_finance_order = [...value.order]
    tipList.value.bills_of_payment = [...value.pay]
}

const approverConfig = ref({})
const store = useFlow()
const { setApproverConfig, setApprover } = store
const approverConfig1 = computed(() => store.approverConfig1)
const approverDrawer = computed(() => store.approverDrawer)
const nodeConfig1 = computed(() => store.nodeConfig1)

const opt = computed(() => {
    const res = getNodeIdsAndNames(nodeConfig1.value).filter((x) => x.type == 1)
    const index = res.findIndex((x) => x.nodeId === approverConfig.value.nodeId)
    const arr = res.slice(0, index + 1)
    return arr
})
const getNodeIdsAndNames = (tree) => {
    const result = []
    function traverse(node) {
        if (node.nodeId && node.nodeName) {
            result.push({ nodeId: node.nodeId, nodeName: node.nodeName, type: node.type })
        }
        if (node.conditionNodes) {
            node.conditionNodes.forEach(traverse)
        }

        if (node.childNode) {
            traverse(node.childNode)
        }
    }
    traverse(tree)
    return result
}
const visible = computed({
    get() {
        return approverDrawer.value
    },
    set() {
        closeDrawer()
    }
})
const openDialog = (item) => {
    tipList.value = item
    tipVisible.value = true
}
const addItem = () => {
    approverConfig.value.reject.push({
        nodeName: '',
        dg_finance_order: [],
        bills_of_payment: []
    })
}
const deleteItem = (index) => {
    if (index === 0) {
        return
    }
    approverConfig.value.reject.splice(index, 1)
}
watch(approverConfig1, (val) => {
    approverConfig.value = val.value
})

const saveApprover = () => {
    approverConfig.value.error = approverConfig.value.people.length === 0
    setApproverConfig({
        value: approverConfig.value,
        flag: true,
        id: approverConfig1.value.id
    })
    closeDrawer()
}
const closeDrawer = () => {
    setApprover(false)
}
</script>
<style lang="scss" scoped>
.drawer-title {
    color: #000;
    font-size: 16px;
    cursor: pointer;

    span {
        position: relative;
    }
}
.drawer-title span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: -5px;
    border-bottom: 1px solid #1989fa;
    opacity: 0;
}
.drawer-title span:hover::after {
    opacity: 1;
}
.tabs-content {
    display: flex;
    > div {
        margin-right: 10px;
        flex: 1;
    }
    .scolle-box {
        height: calc(100vh - 200px);
        overflow-y: auto;
    }
}
.title-mb {
    margin: 10px 0;
}
.reject-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
        display: flex;
        align-items: center;
    }
}
.edit-icon {
    margin-right: 5px;
}
</style>
